<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>校车列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<style>
		.bus {
			border: #50BEA3 1px solid;
			border-radius: 3px;
			margin: 10px 2%;
			width: 96%;
			background-color: white;
		}

		.bus-info {
			width: 48%;
			padding: 10px 0;
			display: inline-block;
		}

		.title {
			font-size: 16px;
			width: 70px;
			text-align: right;
			font-weight: bold;
			display: inline-block;
		}

		.info {
			width: calc(100% - 75px);
			vertical-align: top;
			white-space: nowrap;
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		button {
			width: 100%;
			text-align: center;
			font-size: 20px;
		}

		button>img {
			vertical-align: bottom;
		}

		.bus-attendance {
			width: 2em;
			height: 2em;
			border-radius: 50%;
			padding: 0.35em 0.8em 1.25em 0.8em;
			background-color: #B2E281;
			font-weight: bold;
			position: absolute;
			z-index: 99;
			bottom: 2em;
			right: 2em;
		}

		.bus-attendance a {
			color: white;

		}
	</style>
</head>

<body>
	<div class="header">
		<div class="header_title">校车列表</div>
		<a onclick="history.back()">
			<img src="image/return.png" alt="" class="return">
		</a>
	</div>
	<div style="height: 40px;"></div>

	<div class="bus-list" id="vue-root">

		<div class="bus-attendance" v-if="!isTeacher&&list.length>0">
			<a href="bus_attendance.html">
				校车考勤
			</a>
		</div>

		<a v-for="bus in list" :key="bus.id" :href="'bus_details.html?id='+bus.id">
			<div class="bus">
				<div class="bus-info">
					<div class="title">车牌号</div>
					<div class="number info" v-text="bus.plate"></div>
				</div>
				<div class="bus-info">
					<span class="title">车身颜色</span>
					<span class="color info" v-text="bus.color"></span>
				</div>
			</div>
		</a>

	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>


	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				list: [],
				isTeacher: isTeacher()
			},
			created: function () {
				axios.get((this.isTeacher ? '/t' : '/s') + '/bus2').then(function (res) {
					this.list = res.data;
				}.bind(this));
			},
			methods: {

			}
		});


	</script>
</body>

</html>